<template>
   <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    :auto-upload="false"
    :on-remove="handleRemove"
    list-type="picture"
    name="files"
    multiple
  >
    <el-button type="primary">点击选取图片</el-button>
    
    <template #tip>
      <div class="el-upload__tip">
        最多选择8张图片,删除图片后需要再次点击上传
      </div>
    </template>
  </el-upload>
  <el-button  @click="submitUpload">点击上传</el-button>
</template>
  
<script setup >
import { ref } from 'vue'
import http from '../utils/http'

const emits = defineEmits(['update:listImage'])
const props = defineProps({
  listImage:{
    type: [Array,String],
    default:[]
  },
  url:{
    type: String,
    default:''
  },
  imagesUrl:{
    type: Array,
    default:[]
  },
})


const fileList = ref([])
if (props.imagesUrl.length > 0) {
  // fileList.value = props.imagesUrl.map((item, index) => { 
  //   return {name:index,url:item}
  // })
}  
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  // 这里删除还需要一个name标识符 才能删除父组件的url
}
const submitUpload = () => {
  let formData = new FormData(); //  用FormData存放上传文件
  fileList.value.forEach(file => {
    formData.append("files", file.raw); //文件
  })
  http.upload(props.url, formData).then(resp => { 
    console.log('ajax成功', resp)
    if (resp.code == 200) {
      emits('update:listImage',resp.url)
     }
  })
}

</script>
<style scoped>
.upload-demo{
  width: 100%;
}

</style>